<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			*{
				margin: 0;
			}
			.div1{
				width: 100%;
				height: 200px;
				background-color: skyblue;
				font-size: 50px;
				line-height: 200px;
				letter-spacing: 10px;
			}
			.div2{
				
				margin: 0 auto;
				width: 450px;
			}
			.li{
				animation-name: lian;
				animation-duration: 2500ms;
				animation-iteration-count: infinite;
				animation-timing-function: cubic-bezier(2,1,1,2);
				animation-direction: alternate;
			}
			@keyframes lian{
				0%{margin-top: 0px;}
				50%{margin-top: -50px;}
				100%{margin-top: 0px;}
			}
			.fl{
				float: left;
			}
			.clear_fix::after{
    content: "";
    display: block;
    clear: both;
}
			.span2{
				/*display: block;*/
				animation-delay: 200ms;
			}
			.span3{
				/*display: block;*/
				animation-delay: 400ms;
			}
			.span4{
				/*display: block;*/
				animation-delay: 600ms;
			}
			.span5{
				/*display: block;*/
				animation-delay: 800ms;
			}
			.span6{
				/*display: block;*/
				animation-delay: 1s;
			}
			.span7{
				/*display: block;*/
				animation-delay: 1200ms;
			}
			.div3{
				width: 100%;
				height: 200px;
				font-size: 30px;
				line-height: 200px;
				
				
			}
			.ab1{
			}
			.ab2{
			}
			.ab3{
			}
			.ab4{
			}
			.ac1{
				width: 0px;
				border-top: 8px solid #000000;
				margin-top: -75px;
				transition-property:/* width,font-size*/   all;     /*属性*/
				transition-duration: 5000ms;     /*持续时间*/
				transition-timing-function: ease-in-out;  /*速度线性*/
				transition-delay: 0s;
			}
			.ab1:hover+.ac1{
				width: 50px;
			}
		</style>
		<div class="div1 clear_fix">
			<div class="div2">
			<span class="span1 li fl">L</span>
			<span class="span2 li fl">O</span>
			<span class="span3 li fl">A</span>
			<span class="span4 li fl">D</span>
			<span class="span5 li fl">I</span>
			<span class="span6 li fl">N</span>
			<span class="span7 li fl">G</span>
		</div>
		</div>
		<div class="div3 clear_fix">
		<p class="ab1 ">我是1</p>
		<div class="ac1 "></div>
	</body>
</html>
